<template>
<a-layout-header class="header">
<div class="logo">
  <router-link to="/welcome" style="color: white; font-size: 18px">
    12306抢票系统模拟
  </router-link>
</div>
<div style="float: right; color: white;">
  您好：{{memberInfo.mobile}} &nbsp;&nbsp;
  <router-link to="/login" style="color: white;">
    退出登录
  </router-link>
</div>
<a-menu
    v-model:selectedKeys="selectedKeys"
    theme="dark"
    mode="horizontal"
    :style="{ lineHeight: '64px' }"
>
  <a-menu-item key="/welcome">
    <router-link to="/welcome">
      <coffee-outlined /> &nbsp; 欢迎
    </router-link>
  </a-menu-item>
  <a-menu-item key="/passenger">
    <router-link to="/passenger">
      <user-outlined /> &nbsp; 乘车人管理
    </router-link>
  </a-menu-item>
</a-menu>
</a-layout-header>
</template>

<script setup>
import { ref, watch } from 'vue';
import store from '@/store/index'
import router from '@/router'
const selectedKeys = ref([]);
const memberInfo = store.state.member
watch(() => router.currentRoute.value.path, (newVal, OldVal) => {
  console.log('watch', newVal);
  selectedKeys.value = [];
  selectedKeys.value.push(newVal);
}, {immediate: true})
</script>

<style scoped>
.logo {
  float: left;
  height: 31px;
  width: 150px;
  color: white;
  font-size: 20px;
}
</style>
